<template>
  <div>
    <TopBar title="更改密码" bgc="background: #F3F3F3;"></TopBar>
    <van-field
      :type="type1"
      placeholder="请输入密码(6-30个字符之间)"
      label="原始密码"
      clearable
      :right-icon="icon1"
      @click-right-icon="changelist(1)"
      v-model="oldpwd"
    ></van-field>
    <van-field
      :type="type2"
      clearable
      :right-icon="icon2"
      @click-right-icon="changelist(2)"
      placeholder="请输入密码(6-30个字符之间)"
      label="新密码"
      v-model="newpwd"
    ></van-field>
    <van-field
      :type="type3"
      clearable
      placeholder="请输入密码(6-30个字符之间)"
      label="确认密码"
      :right-icon="icon3"
      @click-right-icon="changelist(3)"
      v-model="newpwd2"
    ></van-field>
    <van-button
      :loading="loading"
      type="info"
      style="width:100%; margin-top: 2vh; "
      loading-text="加载中..."
      @click="updateUser"
    >修改</van-button>
  </div>
</template>

<script>
import { mapState } from "vuex";
import TopBar from "@/views/component/topBar";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      oldpwd: "",
      newpwd: "",
      newpwd2: "",
      type1: "password",
      type2: "password",
      type3: "password",
      icon1: "closed-eye",
      icon2: "closed-eye",
      icon3: "closed-eye",
      loading: false
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    updateUser() {
      this.loading = true;
      if (
        this.oldpwd.trim() === "" ||
        this.newpwd.trim() === "" ||
        this.newpwd2.trim() === ""
      ) {
        this.$message({
          type: "danger",
          message: "密码不能为空"
        });
        this.loading = false;
        return;
      }
      if (this.newpwd != this.newpwd2) {
        this.$message({
          type: "danger",
          message: "新密码不匹配，请重新输入"
        });
        this.loading = false;
        return;
      }
      if (this.newpwd === this.oldpwd) {
        this.$message({
          type: "danger",
          message: "新密码与老密码相同，请重新输入"
        });
        this.loading = false;
        return;
      }
      let pwdField = {};
      pwdField.oldpwd = this.oldpwd;
      pwdField.newpwd = this.newpwd;
      this.$api
        .post(`/api/user/editpwd/${this.userInfo.id}`, pwdField)
        .then(res => {
          this.$message({
            type: "success",
            message: res.data.message
          });
          this.$router.go(-1);
          this.loading = false;
        })
        .catch(() => {
          this.$message({
            type: "danger",
            message: "原始密码错误，修改失败"
          });
          this.loading = false;
        });
    },
    changelist(i) {
      if (i == 1) {
        if (this.icon1 === "eye-o") {
          this.type1 = "password";
          this.icon1 = "closed-eye";
        } else {
          this.type1 = "text";
          this.icon1 = "eye-o";
        }
      }
      if (i == 2) {
        if (this.icon2 === "eye-o") {
          this.type2 = "password";
          this.icon2 = "closed-eye";
        } else {
          this.type2 = "text";
          this.icon2 = "eye-o";
        }
      }
      if (i == 3) {
        if (this.icon3 === "eye-o") {
          this.type3 = "password";
          this.icon3 = "closed-eye";
        } else {
          this.type3 = "text";
          this.icon3 = "eye-o";
        }
      }
    }
  }
};
</script>
<style>
</style>